<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="flex" style="margin-right: 25rpx" @tap="chatFunction()">
					<image style="width:50rpx; height: 50rpx; z-index: 999" src="/static/tabbar/factory/7370.png">
					</image>
				</view>
			</block>
		</hx-navbar>
		<view class="random  flex-direction flex align-center justify-center" @click="randomTask">
			<view style="color: #FFFFFF;font-size: 24rpx;">回到</view>
			<view style="color: #FFFFFF;font-size: 24rpx;">底部</view>
		</view>
		<!-- 报价单弹窗 -->
		<u-popup :show="show1" mode="bottom" @close="close">
			<view>
				<l-file ref="lFile" :logo="logo" @up-success="onSuccess"></l-file>
				<view class="" style="text-align: center;">
					<!-- <button @tap="onUpload">上传</button> -->
					<view v-if="quotation==false" class="upload" @tap="onUpload(1)">添加报价表</view>
					<view v-if="quotation==true" class="upload" @tap="onUpload(1)">报价表已添加(重新选择)</view>
					<view style="text-align: left;padding: 30rpx;">
						<view>项目名称</view>
						<u--input placeholder="请填写项目名称" border="surround" v-model="quotedPrice.projectName"
							style="border-radius: 20rpx;width: 324rpx;height: 112rpx;"></u--input>
					</view>
					<view class="flex justify-between"
						style="padding:10rpx 0 30rpx 0;margin-top:30rpx;justify-content: center;text-align: left;">
						<view style="margin-right:40rpx ;">
							<view>面积</view>
							<u-input placeholder="请输入内容" border="surround" v-model="quotedPrice.area"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;" type="number">
								<template slot="suffix">
									<u--text text="m²" slot="prefix" type="text"></u--text>
								</template>
							</u-input>
						</view>
						<view>
							<view>风格</view>
							<u--input placeholder="请填写设计风格" border="surround" v-model="quotedPrice.styles"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;"></u--input>
						</view>
					</view>
					<view class="flex justify-between" style="padding:30rpx 30rpx ;text-align: left;">
						<view>
							<view>设计服务费</view>
							<u-input type="number" placeholder="请输入设计服务费" border="surround"
								v-model="quotedPrice.service"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;">
								<template slot="suffix">
									<u--text text="%" slot="prefix" type="text"></u--text>
								</template>
							</u-input>
						</view>
						<view>
							<view>产品清单</view>
							<u--input placeholder="请输入产品清单" border="surround" v-model="quotedPrice.prodocp"
								style="border-radius: 20rpx;width: 324rpx;height: 112rpx;"></u--input>
						</view>
					</view>
					<view style="margin-left: 22rpx;display: flex;align-items: center;margin-bottom: 10rpx;">
						<u-switch v-model="quotedPrice.checked" @change="change" active-color="#492D22" active-value="1"
							inactive-value="0"></u-switch><text style="margin-left: 5rpx;color: darkgray;">是否支持白嫖</text>
					</view>
					<view class="flex justify-center flex-direction" style="text-align: left;padding:0 30rpx  ;">
						<view>填写报价金额</view>
						<view class="flex" :class=" selected==true ? 'selected' : 'sess' " style="">
							<input
								style="font-size:35rpx;color: #BDC4CE;height: 100%;line-height: 112rpx;margin-left: 15rpx;"
								placeholder="请填写报价金额" type="number" name="phone" @click="selected=true"
								v-model="quotedPrice.price" @blur="selected=false"></input>
						</view>
						<view style="margin:0 0 0 5rpx;color: darkgray;">请核对该金额是否与报价表内的金额一致</view>
					</view>
					<view style="padding:38rpx 0 ;margin:10rpx auto 30rpx auto ;" class="senghome" @tap="startSending">
						发送
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 邀请安装弹窗 -->
		<u-popup :show="show2" mode="bottom" @close="close">
			<view>
				<view class="flex justify-center flex-direction" style="padding:0 30rpx ;">
					<view style="text-align: center;font-size: 36rpx;margin-top: 30rpx;">邀请安装</view>
					<view style="margin-top:30rpx;" class="flex align-center">
						<easy-select ref="easySelect" size="medium" :value="scheme.name" :tesd='scheme.name'
							@selectOne="selectTwo" :options="options"
							style="border-radius: 20rpx;width:690rpx;height:128rpx;margin-top: 25rpx;">
						</easy-select>
						<view class="installInvitation" @tap="InstallationInvitation">发送邀请</view>
					</view>
					<view style="font-size: 36rpx;margin-top: 30rpx;">预约时间</view>
					<view class="times flex align-center justify-between" style="padding:0 60rpx ;" @tap="showTme=true">
						<view style="color: #1E1E1E;font-size: 40rpx;font-weight: 650;">{{dataTime}}</view>
						<view style="font-size: 32rpx;">{{pmOrdm}}</view>
						<view style="color: #1E1E1E;font-size: 40rpx;font-weight: 650;">{{time}}</view>
					</view>
					<u-datetime-picker :show="showTme" v-model="value1" mode="datetime" @confirm='confirm'
						@cancel="showTme=false"></u-datetime-picker>
				</view>
			</view>
		</u-popup>
		<!-- 分享项目弹窗 -->
		<u-popup :show="show3" mode="bottom" @close="close">
			<view>
				<view class="flex justify-center flex-direction" style="padding:0 30rpx ;">
					<view style="text-align: center;font-size: 36rpx;margin-top: 30rpx;">分享项目</view>
					<view style="margin-top:30rpx;" class="flex align-center">
						<easy-select ref="easySelect" size="medium" :value="scheme.name" :tesd='scheme.name'
							@selectOne="selectTwo" :options="options"
							style="border-radius: 20rpx;width:690rpx;height:128rpx;margin-top: 25rpx;">
						</easy-select>
						<view class="installInvitation" @tap="vitation">发送项目</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view>
			<u-loading-page :loading="load" bg-color="#e5e5e5" loading-mode="semicircle" loading-text="加载中......">
			</u-loading-page>
		</view>
		<view class="content" @touchstart="hideDrawer">
			<scroll-view class="msg-list" :style="'width: 100%;height:'+windowHeight+'px;'" scroll-y="true"
				:scroll-with-animation="scrollAnimation" :scroll-into-view="scrollToView"
				:refresher-enabled="isOpenRefresh" refresher-background="" @refresherrefresh="onRefresh"
				@refresherabort="onAbort" :scroll-top="scrollTop" :refresher-threshold="40"
				:refresher-triggered="triggered" @refresherrestore="onRestore" @scroll="scrollTopFild">
				<view style="height: 50rpx;"></view>
				<view class="row" v-for="(row,index) in msgList" :key="index" :id="'msg'+row.createTime">
					<!-- 用户消息 -->
					<block>
						<!-- 自己发出的消息 -->
						<view class="my" v-if="row.userName==name">
							<view v-if="row.type==4" class="bubble">
								<rich-text :nodes="row.content"></rich-text>
							</view>
							<view v-if="row.type==3" class="bubble voice" @tap="playVoice(row)">
								<view class="length">{{row.audioTime}}</view>
								<view class="icon my-voice" v-if="playMsgid != row.createTime"></view>
								<image src="../../static/cliend/leftRadio.gif" mode=""
									style="width: 55rpx;height: 55rpx;" v-else></image>
							</view>
							<view v-if="row.type==2" class="bubble img" @tap="showPic(row.fileUrl,index)"
								style="background-color:#bfbfbf;border-radius: 20rpx;">
								<image :src="row.fileUrl" style="border-radius: 20rpx;" mode="aspectFill">
								</image>
							</view>
							<!-- 报价单消息 -->
							<view class="quotation flex flex-direction justify-center" v-if="row.type==1"
								@tap="budget(row.quotationId)">
								<view class="flex justify-between quotation-view">
									<view style="color: #1E1E1E;">预算单</view>
									<view style="color: #492D22;">点击查看</view>
								</view>
							</view>
							<!-- 邀请安装消息 -->
							<view v-if="row.type==5">
								<view class="quotation flex flex-direction justify-center align-center"
									@tap="budgetInvitation(row)" style="background: #492D22;">
									<view style="color: #FFFFFF;text-align: center;font-size: 24rpx;padding-top:15rpx;">
										您邀请对方完成订单的安装师傅</view>
									<view class="flex justify-center  quotation-view"
										style="background:#FFFFFF;color: #492D22;">
										点击查看订单
									</view>
								</view>
							</view>
							<!-- 分享项目 -->
							<view v-if="row.type==6">
								<view class="quotation flex flex-direction justify-center align-center"
									@tap="budgetInvitation(row)" style="background: #492D22;">
									<view style="color: #FFFFFF;text-align: center;font-size: 24rpx;padding-top:15rpx;">
										您邀请对方查看项目</view>
									<view class="flex justify-center  quotation-view"
										style="background:#FFFFFF;color: #492D22;">
										点击查看项目
									</view>
								</view>
							</view>
							<view class="right">
								<image :src="row.userName==name? row.avatar : row.receiveAvatar"></image>
							</view>

							<!-- 						<view class="left">
								<view v-if="row.type==4" class="bubble">
									<rich-text :nodes="row.content"></rich-text>
								</view>
								<view v-if="row.type== 3" class="bubble voice" @tap="playVoice(row)"
									:class="playMsgid == row.createTime?'play':''">
									<view class="length">{{row.audioTime}}</view>
									<view class="icon my-voice"></view>
								</view>
								<view v-if="row.type==2" class="bubble img" @tap="showPic(row)">
									<image :src="row.fileUrl" />
								</view>
							</view> -->
						</view>
						<!-- 别人发出的消息 -->
						<view class="other" v-if="row.userName!=name">
							<!-- 左-头像 -->
							<view class="left">
								<image :src="row.userName!=name? row.avatar : row.receiveAvatar"></image>
							</view>
							<!-- 右-用户名称-时间-消息 -->
							<view class="right">
								<view class="username">
									<view class="name">{{row.userName}}</view>
									<view class="time">{{row.createTime}}</view>
								</view>
								<!-- 文字消息 -->
								<view v-if="row.type==4" class="bubble">
									<rich-text :nodes="row.content"></rich-text>
								</view>
								<!-- 语音消息 -->
								<view v-if="row.type==3" class="bubble voice" @tap="playVoice(row)">
									<view class="icon other-voice" v-if="playMsgid != row.createTime"></view>
									<image src="../../static/cliend/rightRadio.gif" mode=""
										style="width: 55rpx;height: 55rpx;" v-else></image>
									<view class="length">{{row.audioTime}}</view>
								</view>
								<!-- 图片消息 -->
								<view v-if="row.type==2" class="bubble img" @tap="showPic(row.fileUrl,index)"
									style="background-color:#FFFFFF;border-radius: 20rpx;">
									<image :src="row.fileUrl" style="border-radius: 20rpx;" mode="aspectFill">
									</image>
								</view>
								<!-- 报价单消息 -->
								<view class="quotation flex flex-direction justify-center" v-if="row.type==1"
									@tap="budget(row.quotationId)">
									<view class="flex justify-between quotation-view">
										<view style="color: #1E1E1E;">预算单</view>
										<view style="color: #492D22;">点击查看</view>
									</view>
								</view>
								<!-- 邀请安装消息 -->
								<view v-if="row.type==5">
									<view class="quotation flex flex-direction justify-center align-center"
										@tap="budgetInvitation(row)">
										<view
											style="color: #FFFFFF;text-align: center;font-size: 24rpx;padding-top:15rpx;color: #333333;font-weight:600;">
											对方邀请您成为订单的安装师傅</view>
										<view class="flex justify-center  quotation-view" style="color: #492D22;">
											点击查看邀请详情
										</view>
									</view>
									<view v-if="row.type==6">
										<view class="quotation flex flex-direction justify-center align-center"
											@tap="budgetInvitation(row)" style="background: #492D22;">
											<view
												style="color: #FFFFFF;text-align: center;font-size: 24rpx;padding-top:15rpx;">
												对方邀请你查看项目</view>
											<view class="flex justify-center  quotation-view"
												style="background:#FFFFFF;color: #492D22;">
												点击查看项目
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</view>
		<!-- 抽屉栏 -->
		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- 表情 -->
			<!-- <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
						<image mode="widthFix" :src="'/static/HM/img/emoji/'+em.url"></image>
					</view>
				</swiper-item>
			</swiper> -->
			<!-- 更多功能 相册-拍照-红包 -->
			<view class="more-layer" :class="{hidden:hideMore}">
				<view class="list">
					<view class="box" @tap="getImage(1)">
						<view class="icon tupian2"></view>
						<view>相册</view>
					</view>

					<view class="box" @tap="getImage(2)">
						<view class="icon paizhao"></view>
						<view>拍照</view>
					</view>
					<view class="box" @tap="show1=true" v-if="chatType == 4 && this.$cache.get('type') ==1 ">
						<u-icon name="coupon-fill" class="icon" size="43" color="#000"></u-icon>
						<view>报价</view>
					</view>
					<view class="box" @tap="lookbi()">
						<u-icon name="plus-square-fill" class="icon" size="43" color="#000"></u-icon>
						<view>邀请安装</view>
					</view>
					<view class="box" @tap="share()">
						<u-icon name="gift-fill" class="icon" size="43" color="#000"></u-icon>
						<view>分享项目</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
			<!-- H5下不能录音，输入栏布局改动一下 -->
			<!-- #ifndef H5 -->
			<view class="voice">
				<view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="textbox">
				<view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel">{{voiceTis}}</view>
				<view class="text-mode" :class="isVoice?'hidden':''">
					<view class="box">
						<textarea auto-height="true" v-model="textMsg" @focus="textareaFocus" />
					</view>
					<!-- <view class="em" @tap="chooseEmoji">
						<view class="icon biaoqing"></view>
					</view> -->
				</view>
			</view>
			<!-- #ifndef H5 -->
			<view class="more" @tap="showMore">
				<view class="icon add"></view>
			</view>
			<!-- #endif -->
			<view class="send" :class="isVoice?'hidden':''" @click="sendText">
				<view class="btn">发送</view>
			</view>
		</view>
		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>
	</view>
</template>
<script>
	import {
		pathToBase64
	} from '@/common/jsdck/index.js'
	import {
		webScroct,
		ws
	} from "@/common/webscroct.js"
	import {
		disposeTime,
		repairZero,
		deepClone
	} from '@/uni_modules/y-chat/components/y-chat/common.js'
	import baseUrl from '@/common/config.js'
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "消息列表",
					back: true,
					rightSlot: true,
				},
				load: true,
				//错误重连次数
				errorSocket: 0,
				myTitle: "",
				sendTitle: "",
				sendAvatar: "",
				myAvatar: "",
				api: "",
				imgApi: "",
				webSocketUrl: "websocket/",
				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				myuid: 0,
				sendId: 0,
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,
				//表情定义
				hideEmoji: true,
				//红包相关参数
				windowsState: '',
				redenvelopeData: {
					rid: null, //红包ID
					from: null,
					face: null,
					blessing: null,
					money: null
				},
				// Socket连接状态
				IsOpen: false,
				// SocketTask
				SocketTask: false,
				// 是否上线
				IsOnline: false,
				//对方的职业
				chatType: null,
				//自己的名字
				name: '',
				pageNum: null,
				pages: null,
				isOpenRefresh: true, // 是否开启下拉
				scrollTop: 40,
				pageSize: 10,
				triggered: false,
				Isfreshing: false,
				windowHeight: '',
				yoyo: null,
				//报价单弹窗判断
				show1: false,
				// 邀请安装弹窗判断
				show2: false,
				logo: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F00%2F07%2F155788a6d8a5c42.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619847627&t=2da40b583002205c204d980b54b35040',
				// 是否选择了报价表
				quotation: false,
				//报价单对象
				quotedPrice: {
					quote: '',
					area: null,
					prodocp: '',
					styles: '',
					service: '',
					price: '',
					checked: false,
					projectName: ''
				},
				uuu: "",
				// 安装邀请对象
				scheme: {
					inventory: '暂无',
					time: '',
					name: '',
					orderNum: ''
				},
				//是否选择白嫖
				selected: true,
				// 预算单ID
				quotationId: null,
				// 邀请安装日期
				dataTime: '03-01',
				// 上午还是下午
				pmOrdm: '上午',
				// 时间
				time: '12.30',
				showTme: false,
				value1: Number(new Date()),
				options: [],
				// 发送项目弹窗判断
				show3: false
			};
		},
		computed: {},
		onLoad(e) {
			uni.getSystemInfo({
				success: res => {
					let height = res.windowHeight;
					// #ifndef H5
					height -= 45;
					// #endif
					height = height - res.safeAreaInsets.bottom - 45 - 50;
					this.windowHeight = height;
					console.log(this.windowHeight, '自行车自行车')
				}
			})
			this.chatType = e.type
			this.myuid = this.$cache.get('id');
			this.sendId = e.sendId
			this.config.title = e.title
			//获取聊天记录
			this.getMsgList();
			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
			this.openSocket()
			console.log("连接后", e)
		},
		onHide() {
			console.log("页面隐藏了")

		},
		onUnload() {
			console.log("页面卸载")
			this.IsOnline = false
			uni.closeSocket();
		},
		onShow() {
			console.log("再次进入页面，判断是否需要重连");
			this.openSocket();
			this.name = this.$cache.get('name')
			this.sendAvatar = this.$cache.get('avatar')
		},
		methods: {
			confirm(e) {
				console.log(e, 'xzczxczczxcaczzs发我发我')
				const date = new Date(e.value)
				const Y = date.getFullYear()
				const M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
				const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				const h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				// Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
				this.dataTime = M + '-' + D
				this.time = h + ':' + m
				this.DayStr(this.time)
				this.showTme = false
			},
			DayStr(hour) {
				var hours = hour.substring(0, hour.indexOf(':'));
				var min = hour.substring(hour.indexOf(':'));
				let text = '';
				if (hours >= 0 && hours <= 12) {
					this.pmOrdm = '上午';
					if (hours == 12 && min > 0) {
						this.pmOrdm = '下午';
					}
				} else {
					this.pmOrdm = '下午';
				}
			},
			project() {
				this.$api.getProjectList().then((res) => {
					this.options = res.data.result
				})
			},
			//安装邀请
			InstallationInvitation() {
				let fe = {
					receiveId: this.sendId,
					projectNum: this.scheme.orderNum
				}
				this.$api.projectHasRepeat(fe).then((res) => {
					console.log(res, '现在创造性')
					if (res.data.result == -1) {
						this.$tools.showToast('您已经给当前安装师傅发送过这个项目的邀请了')
						return;
					}
				})
				this.scheme.time = this.value1
				if (this.chatType != 3) return this.$tools.showToast('只有对方是安装师傅才能发送安装邀请')
				if (this.scheme.inventory == '') return this.$tools.showToast('请选择你的项目')
				console.log(this.scheme, '了看见了看见')
				let data = {
					type: 5,
					message: this.scheme,
					userName: this.name,
					avatar: this.sendAvatar,
					createTime: new Date().getTime(),
				}
				let data2 = JSON.stringify(data);
				console.log('data', data)
				uni.sendSocketMessage({
					data: data2,
					success: (res) => {
						console.log(res, '行政村自行车在小')
						this.screenMsg(data);
						this.show1 = false
						this.show2 = false
						this.show3 = false
						this.showTme = false
						this.hideDrawer()
					},
					fail: (error) => {
						console.log(eror, '错误回调');
					},
					complete: (res) => {
						console.log('执行完毕', res)
					}
				});
			},
			vitation() {
				if (this.scheme.inventory == '') return this.$tools.showToast('请选择你的项目')
				console.log(this.scheme, '了看见了看见')
				let data = {
					type: 6,
					message: this.scheme,
					userName: this.name,
					avatar: this.sendAvatar,
					createTime: new Date().getTime(),
				}
				let data2 = JSON.stringify(data);
				console.log('data', data)
				uni.sendSocketMessage({
					data: data2,
					success: (res) => {
						console.log(res, '行政村自行车在小')
						this.screenMsg(data);
						this.show1 = false
						this.show2 = false
						this.show3 = false
						this.hideDrawer()
					},
					fail: (error) => {
						console.log(eror, '错误回调');
					},
					complete: (res) => {
						console.log('执行完毕', res)
					}
				});
			},
			selectTwo(options) {
				this.scheme.name = options.name
				this.scheme.inventory = options.orderNum
				this.scheme.orderNum = options.orderNum
			},
			scrollTopFild(e) {
				// this.scrollTop = e.tatarget.scrollTop
			},
			close() {
				this.show1 = false
				this.show2 = false
				this.show3 = false
				// console.log('close');
			},
			change(status) {
				if (status == true) this.$tools.showToast('你选择了确认支持')

			},
			//跳转到预算单详情
			budget(e) {
				console.log(e, 'uouio')
				let id;
				e == undefined ? id = this.quotationId : id = e
				this.$tools.goPageNoAuth('/clientEnd/page/chat/budgetSheet?data=' + id)
			},
			//上传回调
			onSuccess(res) {
				console.log(res, '自知则知之做')
				if (res.statusCode == 200) {
					this.quotation = true
				} else {
					this.quotation = false
				}
				this.quotedPrice.quote = 'http://' + res.data.result
			},
			randomTask() {
				this.scrollTop = -1;
				this.$nextTick(() => {
					this.scrollAnimation = true
					this.scrollTop = 99999;
				});
				console.log(this.scrollTop)

			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.error("onAbort");
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置  
				console.log("onRestore");
			},
			onRefresh() {
				if (this.Isfreshing) return;
				this.Isfreshing = true;
				if (!this.triggered) //保证刷新状态下，triggered为true  
					this.triggered = true;
				let data = {
					pageNo: this.pageNum,
					pageSize: this.pageSize,
					receiveId: this.sendId,
					receiveType: this.chatType
				}
				if (this.pageNum == 1) {
					this.$tools.showToast('没有更多了')
					this.triggered = false; //触发onRestore，关闭刷新图标
					this.Isfreshing = false;
					return;
				}
				if (this.pageNum > 1) {
					data.pageNo--
				}
				setTimeout(() => {
					this.triggered = false; //触发onRestore，关闭刷新图标  
					this.Isfreshing = false;
					this.getMsgList(data)
				}, 1200)
			},
			chatFunction() {
				console.log(this.sessionId, '宣传宣传')
				this.$tools.goPageNoAuth('./ChatFunction?data=' + this.sessionId)
			},
			openSocket() {
				// 防止重复连接
				if (this.IsOpen) return
				let token = uni.getStorageSync("token")
				console.log(webScroct, '说张洒洒')
				let url = ws + webScroct + '/websocket/' + token + "/" + this.sendId + "/" + this.chatType
				this.uuu = url
				console.log('url', url)
				// 连接
				this.SocketTask = uni.connectSocket({
					url: url,

					fail(e) {
						console.log("连接失败")
					},
					success() {
						console.log("连接成功")
					},
					complete: () => {}
				});
				console.log('socket', this.SocketTask)
				if (!this.SocketTask) return;
				console.log('达瓦大的乡村振兴', this.SocketTask)
				// 监听开启
				this.SocketTask.onOpen(() => {
					// 将连接状态设为已连接
					console.log('将连接状态设为已连接');
					this.errorSocket = 0
					this.IsOpen = true
					this.IsOnline = true
				})
				// 监听关闭
				this.SocketTask.onClose(() => {
					this.IsOpen = false;
					if (!this.IsOnline) {
						uni.closeSocket();
					} else {
						//非主动关闭，尝试重连
						console.log('socket重连中....');
						//判断重连次数是否大于3
						if (this.errorSocket >= 3) {
							console.log("this.errorSocket", this.errorSocket);
							uni.showToast({
								title: "服务器连接失败，请返回上个页面重试",
								duration: 3000,
								icon: none
							})
							console.log('socket重连达到上限');
							uni.closeSocket();
							this.IsOnline = false
						} else {
							this.errorSocket++;
							console.log("this.errorSocket2", this.errorSocket);
							this.openSocket();

						}
					}
				})
				// 监听错误
				this.SocketTask.onError(() => {
					// this.
					console.log('连接错误');
					this.IsOpen = false;
					if (!this.IsOnline) {
						console.log('连接已关闭');
						uni.closeSocket();
					} else {
						//如果不是主动关闭的，那么进行重连
						console.log('socket重连中....');
						//判断重连次数是否大于3
						if (this.errorSocket >= 3) {
							uni.showToast({
								title: "服务器连接失败，请返回上个页面重试",
								duration: 3000,
								icon: none
							})
							console.log('socket重连达到上限');
							uni.closeSocket();
							this.IsOnline = false
						} else {
							this.errorSocket++;
							this.openSocket();

						}
					}
				})
				// 监听接收信息
				this.SocketTask.onMessage((e) => {
					this.getMessageSend(e)
				})
			},

			//获取服务端消息并渲染到页面上
			getMessageSend(e) {
				let a = JSON.parse(e.data)
				console.log('接收消息1', a);
				let msg = {
					// id: lastid,
					userName: a.userName,
					avatar: a.avatar,
					createTime: disposeTime(a.createTime),
					type: a.type,
					fileUrl: a.fileUrl,
					content: a.content
				}
				if (a.remark == null || a.remark == undefined || a.remark == '') {
					this.screenMsg(msg);
				}
				this.quotationId = Number(a.quotationId)
			},
			// 接受消息(筛选处理)
			screenMsg(msg) {
				//从长连接处转发给这个方法，进行筛选处理
				// 用户消息
				console.log('msgmsgmsgmsg', msg);
				switch (msg.type) {
					//发送报价
					case 1:
						this.addTextMsg(msg);
						break;
						//发送图片
					case 2:
						this.addImgMsg(msg);
						break;
						//发送语音
					case 3:
						this.addVoiceMsg(msg);
						break;
						//发送文字
					case 4:
						this.addRedEnvelopeMsg(msg);
						break;
					case 5:
						this.addTextMsg(msg);
						break;
					case 6:
						this.addTextMsg(msg);
						break;
				}
				console.log('用户消息123');
				uni.vibrateLong();
				this.$nextTick(function() {
					// 滚动到底
					console.log('滚动的msg', msg.createTime)
					this.scrollToView = 'msg' + msg.createTime
				});
				this.$forceUpdate()
			},
			// 加载初始页面消息
			getMsgList(data) {
				console.log('send', data)
				if (data == undefined) {
					data = {
						receiveId: this.sendId,
						receiveType: this.chatType
					}
				}
				this.$api.history(data).then((res) => {
					console.log(res, '自行车自行车这些')
					this.pageNum = res.data.result.pageNo,
						this.pages = res.data.result.pages,
						res.data.result.list.forEach((item) => {
							item.createTime = disposeTime(item.createTime)
						})
					if (res.data.result.pages == res.data.result.pageNo) {
						this.msgList = res.data.result.list
					} else {
						let a = res.data.result.list
						let b = this.msgList
						this.msgList = [...a, ...b]
					}
					console.log(this.msgList, '达瓦达瓦')
					this.load = false
					// // 滚动到底部
					this.scrollTop = -1
					this.$nextTick(() => {
						this.scrollAnimation = true;
					})
				})
			},
			//更多功能(点击+弹出) 
			showMore() {
				this.isVoice = false;
				this.hideEmoji = true;
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			budgetInvitation(e) {
				let obj = {};
				if (this.scheme.name == '' && e != undefined) {
					obj = e.remark
				} else {
					obj = this.scheme
				}
				if (this.$cache.get('type') == 3) {
					this.$tools.goPageNoAuth('/pages/information/invitation?data=' + JSON.stringify(obj))
				} else {
					this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orderDetail?data=' + JSON.stringify(obj))
				}

			},
			// 打开邀请安装
			lookbi() {
				this.hideDrawer()
				this.project()
				this.show2 = true
			},
			share() {
				this.hideDrawer()
				this.project()
				this.show3 = true
			},
			// 打开抽屉
			openDrawer() {
				this.popupLayerClass = 'showLayer';
			},
			// 隐藏抽屉
			hideDrawer() {
				this.popupLayerClass = '';
				setTimeout(() => {
					this.hideMore = true;
					this.hideEmoji = true;
				}, 150);
			},
			//选照片 or 拍照
			async getImage(type) {
				console.log("照片", type)
				this.hideDrawer();
				let file = await this.$tools.chooseImg(type, 1, 1)
				let fileUrl = await this.$tools.uploadFile(file[0].path, 2)
				console.log(fileUrl, '啊实打实')
				let msg = {
					userName: this.name,
					avatar: this.sendAvatar,
					createTime: new Date().getTime(),
					message: '',
					type: 2,
					fileUrl: 'http://' + fileUrl
				}
				let feelors = msg
				msg = JSON.stringify(msg)
				uni.sendSocketMessage({
					data: msg,
					success: (res) => {
						console.log('结果', res)
					},
					fail: (error) => {
						console.log(error, '失败回调')
					}
				});
				this.addImgMsg(feelors)
			},
			// 选择表情
			chooseEmoji() {
				this.hideMore = true;
				if (this.hideEmoji) {
					this.hideEmoji = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			//添加表情
			addEmoji(em) {
				this.textMsg += em.alt;
			},

			//获取焦点，如果不是选表情ing,则关闭抽屉
			textareaFocus() {
				if (this.popupLayerClass == 'showLayer' && this.hideMore == false) {
					this.hideDrawer();
				}
			},
			// 发送文字消息			
			sendText() {
				console.log("进入消息")
				this.hideDrawer(); //隐藏抽屉
				if (!this.textMsg) {
					return;
				}
				let content = this.replaceEmoji(this.textMsg);
				this.sendMsg(content, 4);
				let data = {
					message: this.textMsg,
					type: 4
				}
				data = JSON.stringify(data);
				console.log("this.uuu: ", this.uuu);
				uni.sendSocketMessage({
					data: data,
					complete: (res) => {
						console.log('调用完毕', res)
					}
				});
				this.textMsg = ''; //清空输入框

			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					console.log("item: " + item);
					// for (let i = 0; i < this.emojiList.length; i++) {
					// 	let row = this.emojiList[i];
					// 	for (let j = 0; j < row.length; j++) {
					// 		let EM = row[j];
					// 		if (EM.alt == item) {
					// 			//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
					// 			//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
					// 			let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
					// 			let imgstr = '<img src="' + onlinePath + this.onlineEmoji[EM.url] + '">';
					// 			console.log("imgstr: " + imgstr);
					// 			return imgstr;
					// 		}
					// 	}
					// }
				});
				return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';
			},

			// 发送消息
			sendMsg(content, type) {
				var nowDate = new Date();
				let msg = {
					// id: lastid,
					userName: this.name,
					avatar: this.sendAvatar,
					createTime: new Date().getTime(),
					type: type,
					content: content
				}
				console.log('msg', msg)
				this.screenMsg(msg);
			},

			// 添加文字消息到列表
			addTextMsg(msg) {
				this.msgList.push(msg);
				console.log(this.msgList, '小出现自产自销')
			},
			// 添加语音消息到列表
			addVoiceMsg(msg) {
				console.log('达瓦现在创造性', msg)
				this.msgList.push(msg);
				this.$forceUpdate()
			},
			// 添加图片消息到列表
			addImgMsg(msg) {
				console.log('VS额粉色', msg)
				this.msgList.push(msg);
				console.log('VS额粉色', this.msgList)
				this.$nextTick(() => {
					// 滚动到底
					console.log('滚动的msg', msg.createTime)
					this.scrollToView = 'msg' + msg.createTime
				});
				console.log(this.msgList, '接收到图片')
			},
			//发送文字
			addRedEnvelopeMsg(msg) {
				console.log('发色分色分色', msg)
				this.msgList.push(msg);
			},
			// 添加系统文字消息到列表
			addSystemTextMsg(msg) {
				this.msgList.push(msg);
			},
			sendSystemMsg(content, type) {
				let lastid = this.msgList[this.msgList.length - 1].msg.id;
				lastid++;
				let row = {
					type: "system",
					msg: {
						id: lastid,
						type: type,
						content: content
					}
				};
				this.screenMsg(row)
			},
			// 预览图片
			showPic(msg, index) {
				let arr = [msg]
				uni.previewImage({
					indicator: "none",
					urls: arr
				});
			},
			// 播放语音
			playVoice(e) {
				if (e.type == 3) {
					this.yoyo = e.fileUrl
					this.playMsgid = e.createTime;
				}
				this.AUDIO.src = this.yoyo;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 录音开始
			voiceBegin(e) {
				console.log("开始录音")
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				console.log("录音结束")
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				if (!this.willStop) {

					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					msg.length = min + ':' + sec;
					this.radioUploadFile(msg)
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
			async radioUploadFile(msg) {
				let radio = await this.$tools.uploadFile(msg.url, 3)
				let data = {
					type: 3,
					fileUrl: 'http://' + radio,
					audioTime: msg.length,
					concat: '',
					userName: this.name,
					avatar: this.sendAvatar,
					createTime: new Date().getTime(),
				}
				let data2 = JSON.stringify(data);
				console.log('data', data)
				uni.sendSocketMessage({
					data: data2,
					success: (res) => {
						this.screenMsg(data);
					},
					fail: (error) => {
						console.log(eror, '错误回调');
					},
					complete: (res) => {
						console.log('执行完毕', res)
					}
				});
			},
			// 切换语音/文字输入
			switchVoice() {
				this.hideDrawer();
				this.isVoice = this.isVoice ? false : true;
			},
			discard() {
				return;
			},
			/* 上传 */
			onUpload(e) {
				console.log(uni.getStorageSync('token'), 'xxx')
				/**
				 * url：上传接口地址
				 * name：附件key,服务端根据key值获取文件流，默认file,上传文件的key
				 * header: 上传接口请求头
				 */
				this.$refs.lFile.upload({
					//替换为你的上传接口地址
					url: 'http://www.cohome.com.cn/api/universal/uploadCloud',
					// 服务端接收附件的key
					name: 'file',
					//根据你接口需求自定义 (优先不传content-type,安卓端无法收到参数再传)
					header: {
						'Authorization': uni.getStorageSync('token'),
						// 'Content-Type':'multipart/form-data'
						// 'Content-type': 'application/x-www-form-urlencoded;',
						// 'Content-type': 'application/json',
						// 'uid': '27682',
						// 'client': 'app',
					},
					// 限制选择附件的大小上限，默认10M
					// maxSize: 20,

					// 若需要在body单独添加附件名或附件大小如下方式传入组件：
					// addName: 'file',
					// addSize: '后端要的附件大小字段key'

					// body参数直接写key,value,如：
					// date: '2020-1-1',
					exce: e,
					type: 1
					// key2: 'value2',
				});
			},
			//报价
			startSending() {
				if (this.chatType != 4) return this.$tools.showToast('只有对方是业主才能发送报价')
				if (this.quotedPrice.quote == '') return this.$tools.showToast('请选择报价单')
				if (this.quotedPrice.projectName == '') return this.$tools.showToast('请输入项目名称')
				if (this.quotedPrice.service > 1 && this.quotedPrice.service < 101) {
					let data = {
						type: 1,
						message: this.quotedPrice,
						userName: this.name,
						avatar: this.sendAvatar,
						createTime: new Date().getTime(),
					}
					let data2 = JSON.stringify(data);
					console.log('data', data)
					uni.sendSocketMessage({
						data: data2,
						success: (res) => {
							this.screenMsg(data);
							this.show1 = false
							this.hideDrawer()
						},
						fail: (error) => {
							console.log(eror, '错误回调');
						},
						complete: (res) => {
							console.log('执行完毕', res)
						}
					});
				} else {
					return this.$tools.showToast('设计服务费区间(2-100)');
				}

			},
		}
	}
</script>
<style lang="scss">
	@import "@/static/style.scss";

	uni-page-wrapper {
		height: auto !important;
	}

	.bubble {
		max-width: 70%;
		min-height: 50rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		word-break: break-word;
		background-color: #f06c7a;
		color: #fff;
	}

	.random {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(180deg, rgba(255, 98, 98, 1) 0%, rgba(255, 51, 51, 1) 100%);
		border-radius: 50%;
		box-shadow: 0px 6px 9px 0px rgba(255, 221, 221, 1);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 230rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 330rpx;
		/*  #endif */
	}

	.upload {
		width: 690rpx;
		height: 120rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 2rpx solid #492D22;
		color: #492D22;
		font-size: 32rpx;
		padding: 36rpx 0;
		margin: 30rpx auto;
	}

	.selected {
		width: 690rpx;
		height: 112rpx;
		margin: 20rpx 30rpx 30rpx 0;
		border-radius: 20rpx;
		border: 5rpx solid #492D22;
	}

	.sess {
		width: 690rpx;
		height: 112rpx;
		margin: 20rpx 30rpx 30rpx 0;
		border-radius: 20rpx;
		border: 1rpx solid #7A6A56;
	}

	.quotation {
		width: 400rpx;
		height: 200rpx;
		background: #FFFFFF;
	}

	.quotation-view {
		width: 350rpx;
		height: 169rpx;
		text-align: center;
		align-items: center;
		padding: 20rpx 40rpx;
		background: rgba(30, 30, 30, 0.05);
		border-radius: 10rpx;
		margin: 20rpx auto;
	}

	.senghome {
		width: 404rpx;
		height: 124rpx;
		background: #492D22;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}

	.installInvitation {
		width: 228rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #492D22;
		color: #FFFFFF;
		text-align: center;
		margin-left: 30rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.times {
		width: 690rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		opacity: 1;
		margin: 30rpx 0;
		border: 2rpx solid #492D22;
	}
</style>